<template>
  <!--
  @Author: cyp
  @Description: 表单页模板页，主要说明如下：
   1、所有Form组件全部使用【eve-common-Form组件名称】包裹，可以统一修改Form组件样式；eg:eve-common-input
   2、新增el-form两列和三列布局，主要使用el-row进行个性化布局模拟类表格样式，严格按照demo进行拷贝代码，否则可能会出现样式错乱；
   3、修改Form个性化错误提示,由原先的【输入框底部显示】改成显示在【输入框右侧】提示Icon,移入Icon显示详细错误信息；eg:代码参考[自定义表单错误提示]
   4、修改Radio和checkBox选中样式，实心反转；
   5、新增Radio和checkBox纵向单选和横向单选样式；eg：使用.eve-common-vertical控制
   6、新增简单上传文件组件;eg:具体逻辑参考源码
   7、Form的颜色样式取自base.scss文件；
   8、新增【全局性修改css】；
   9、新增动态增减【表格类表单】组件。eg:具体逻辑参考源码；
   10、新增 class="eve-common-fixed-error"，需固定错误提示位置时需要新增该class属性,如跟随表单后面的话，不需要添加改class属性;
   11、新增自定义label说明icon
   12、新增正则表达式例子
   13、新增省-市-县表单例子
   14、新增日期范围选择例子
   15、优化详情字段重叠问题
   16、优化element自带日期范围组件样式错乱
   特别说明：
    1、如需修改该模板页的个性化样式，建议自定义class包裹修改样式，不建议直接调整demo页写好的样式；
  @Date: 2021-7-9
  @EditDate:2021-7-26
  -->
  <eve-container padding="20px">
    <!-- 弹窗展示表单页，不需要使用eve-container组件包裹 -->
    <div class="eve-common-form-container">
      <h4 style="margin-bottom:12px;">两列表单</h4>
      <el-form ref="form" class="eve-common-form" :model="form" :rules="rules" label-width="200px">
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <div class="eve-common-form-title">两列表单标题-label设置为200px</div>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item>
              <span slot="label">
                带图标说明
                <i
                  class="eve-common-icon eve-iconfont eve-icon-question-circle-o"
                  @click="info"
                ></i>
              </span>
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="form.text"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="必填校验" prop="requestText">
              <el-input class="eve-common-input" :size="$size" v-model="form.requestText" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <el-form-item label="长文本长文本长文本（长文本长文本长）">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="form.longText"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <el-form-item label="证件有效期" prop="dateRangScope">
              <el-date-picker
                class="eve-common-date-picker"
                v-model="form.dateRangScope"
                type="daterange"
                :size="$size"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <el-form-item label="带详情字段" prop="detailField">
              <span class="eve-common-detail-field">{{form.detailField}}</span>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="省-市-县" prop="address">
              <area-code-selector :size="$size" v-model="form.address"></area-code-selector>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期范围" prop="dateRange">
              <el-date-picker
                class="eve-common-date-picker"
                :size="$size"
                v-model="form.dateRange.dateStart"
                type="date"
                placeholder="开始日期"
              ></el-date-picker>
              <span>&nbsp;&nbsp;~&nbsp;&nbsp;</span>
              <el-date-picker
                class="eve-common-date-picker"
                :size="$size"
                v-model="form.dateRange.dateEnd"
                type="date"
                placeholder="结束日期"
              ></el-date-picker>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <el-form-item label="文本域">
              <el-input
                class="eve-common-input"
                type="textarea"
                maxlength="200"
                :size="$size"
                :rows="3"
                show-word-limit
                v-model="form.fieldText"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <el-form-item label="下拉树">
              <eve-drop-down-tree
                class="eve-common-drop-down-tree"
                :size="$size"
                :data="dropDownTree"
              ></eve-drop-down-tree>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="密码框" prop="passwordText">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="form.passwordText"
                show-password
                style="width:85%"
              />
              <span class="eve-common-info-tip">说明文字</span>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="带清空">
              <el-input class="eve-common-input" :size="$size" v-model="form.clearText" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="数字加减1">
              <el-input-number
                class="eve-common-input-number"
                v-model="form.numberText"
                :size="$size"
                :min="1"
                :max="10"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="带单位" prop="unitText">
              <el-input-number
                class="eve-common-input-number"
                :size="$size"
                v-model="form.unitText"
              />
              <span class="eve-common-info-tip">万元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="横向单选">
              <el-radio-group
                :size="$size"
                class="eve-common-radio-group eve-common-horizontal"
                v-model="form.horizontalRadio"
              >
                <el-radio label="1">单选按钮1</el-radio>
                <el-radio label="2">单选按钮2</el-radio>
                <el-radio label="3">单选按钮3</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="横向多选">
              <el-checkbox-group
                :size="$size"
                class="eve-common-checkbox-group eve-common-horizontal eve-common-fixed-error"
                v-model="form.horizontalCheckBox"
              >
                <el-checkbox label="复选框 A"></el-checkbox>
                <el-checkbox label="复选框 B"></el-checkbox>
                <el-checkbox label="复选框 C"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="纵向单选">
              <el-radio-group
                :size="$size"
                class="eve-common-radio-group eve-common-vertical"
                v-model="form.verticalRadio"
              >
                <el-radio label="1">单选按钮1</el-radio>
                <el-radio label="2">单选按钮2</el-radio>
                <el-radio label="3">单选按钮3</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纵向多选" prop="verticalCheckBox">
              <el-checkbox-group
                :size="$size"
                class="eve-common-checkbox-group eve-common-vertical"
                v-model="form.verticalCheckBox"
              >
                <el-checkbox label="复选框 A"></el-checkbox>
                <el-checkbox label="复选框 B"></el-checkbox>
                <el-checkbox label="复选框 C"></el-checkbox>
              </el-checkbox-group>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="下拉选择" prop="selectText">
              <el-select
                class="eve-common-select"
                :size="$size"
                clearable
                v-model="form.selectText"
                placeholder="请选择"
              >
                <el-option label="黄金糕" value="选项1"></el-option>
                <el-option label="双皮奶" value="选项2"></el-option>
                <el-option label="蚵仔煎" value="选项3"></el-option>
                <el-option label="龙须面" value="选项4"></el-option>
                <el-option label="北京烤鸭" value="选项5"></el-option>
              </el-select>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="下拉多选" prop="selectMultipleText">
              <el-select
                class="eve-common-select"
                :size="$size"
                clearable
                v-model="form.selectMultipleText"
                multiple
                placeholder="请选择"
              >
                <el-option label="黄金糕" value="选项1"></el-option>
                <el-option label="双皮奶" value="选项2"></el-option>
                <el-option label="蚵仔煎" value="选项3"></el-option>
                <el-option label="龙须面" value="选项4"></el-option>
                <el-option label="北京烤鸭" value="选项5"></el-option>
              </el-select>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="支持搜索下拉选择">
              <el-select
                class="eve-common-select"
                :size="$size"
                filterable
                v-model="form.selectFilterText"
                placeholder="请选择"
              >
                <el-option label="黄金糕" value="选项1"></el-option>
                <el-option label="双皮奶" value="选项2"></el-option>
                <el-option label="蚵仔煎" value="选项3"></el-option>
                <el-option label="龙须面" value="选项4"></el-option>
                <el-option label="北京烤鸭" value="选项5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支持搜索下拉多选">
              <el-select
                class="eve-common-select"
                :size="$size"
                filterable
                v-model="form.selectFilterMultipleText"
                multiple
                placeholder="请选择"
              >
                <el-option label="黄金糕" value="选项1"></el-option>
                <el-option label="双皮奶" value="选项2"></el-option>
                <el-option label="蚵仔煎" value="选项3"></el-option>
                <el-option label="龙须面" value="选项4"></el-option>
                <el-option label="北京烤鸭" value="选项5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="级联下拉单选">
              <el-cascader
                class="eve-common-cascader"
                :size="$size"
                v-model="form.cascaderText"
                :options="cascaderOption"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="级联下拉多选">
              <el-cascader
                class="eve-common-cascader"
                :size="$size"
                :options="cascaderOption"
                :props="{ multiple: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="开关">
              <el-switch class="eve-common-switch" :size="$size" v-model="form.switchText"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="滑块">
              <el-slider class="eve-common-slider" :size="$size" v-model="form.sliderText"></el-slider>
              <span class="eve-common-info-tip">{{form.sliderText}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="日期选择" prop="dateText">
              <el-date-picker
                class="eve-common-date-picker"
                :size="$size"
                v-model="form.dateText"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间选择">
              <el-time-select
                class="eve-common-time-select"
                v-model="form.timeText"
                :size="$size"
                :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30'
              }"
                placeholder="选择时间"
              ></el-time-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="月份选择">
              <el-date-picker
                class="eve-common-date-picker"
                :size="$size"
                v-model="form.monthText"
                type="month"
                placeholder="选择月份"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="简单上传" prop="fileText">
              <el-input
                class="eve-common-input"
                :size="$size"
                readonly
                v-model="form.fileText"
                placeholder="未选择任何文件"
              />
              <input ref="inputUploadFile" type="file" @change="uploadChange" style="display:none" />
              <el-button
                type="primary"
                :size="$size"
                style="margin-left:12px;"
                @click="uploadTextBtn"
              >上传</el-button>
              <el-button :size="$size" @click="clearUploadTextBtn">清空</el-button>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="多文件上传">
              <el-upload
                class="eve-common-upload"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button :size="$size" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传带缩略图">
              <el-upload
                class="eve-common-upload"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
              >
                <el-button :size="$size" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <h4 style="margin:12px 0;">三列表单</h4>
      <el-form ref="form" :model="form" :rules="rules" label-width="160px">
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <div class="eve-common-form-title">三列表单标题-label设置为160px</div>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="8">
            <el-form-item label="常规文本框">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="form.text"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="常规文本框">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="form.text"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="必填校验" prop="requestText">
              <el-input class="eve-common-input" :size="$size" v-model="form.requestText" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="8">
            <el-form-item label="常规文本框">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="form.text"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="常规文本框">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="form.text"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="必填校验" prop="requestText">
              <el-input class="eve-common-input" :size="$size" v-model="form.requestText" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="8">
            <el-form-item label="常规文本框">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="form.text"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="常规文本框">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="form.text"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="必填校验" prop="requestText">
              <el-input class="eve-common-input" :size="$size" v-model="form.requestText" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="常规文本框">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="form.text"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="常规文本框">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="form.text"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <h4 style="margin:12px 0;">带正则表单验证的例子</h4>
      <el-form ref="form" :model="formValidate" :rules="formValidateRules" label-width="160px">
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <div class="eve-common-form-title">带正则表单验证的例子</div>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="手机" prop="mobilePhone">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="formValidate.mobilePhone"
                placeholder="请输入"
              />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="固定电话" prop="fixedPhone">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="formValidate.fixedPhone"
                placeholder="请输入"
              />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="传真" prop="fax">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.fax" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="邮箱" prop="email">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="formValidate.email"
                placeholder="请输入"
              />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="邮政编码" prop="postalCode">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="formValidate.postalCode"
                placeholder="请输入"
              />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="身份证" prop="idCard">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.idCard" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="统一社会信用代码" prop="socialCreditCode">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="formValidate.socialCreditCode"
                placeholder="请输入"
              />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="全数字" prop="allDigital">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="formValidate.allDigital"
                placeholder="请输入"
              />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="全中文" prop="allChinese">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.allChinese" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="全字母" prop="allLetters">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="formValidate.allLetters"
                placeholder="请输入"
              />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="数字+字母" prop="numberAndLetter">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="formValidate.numberAndLetter"
                placeholder="请输入"
              />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="车牌号（含新能源）" prop="carNumber">
              <el-input
                class="eve-common-input"
                :size="$size"
                v-model="formValidate.carNumber"
                placeholder="请输入"
              />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <h4 style="margin:12px 0;">动态增减</h4>
      <el-form :model="tableForm" :rules="tableRules" ref="tableForm">
        <el-table :data="tableForm.list" border style="width: 100%" :size="$size">
          <el-table-column type="index" label="序号" min-width="20" align="lef"></el-table-column>
          <el-table-column label="日期" align="left" width="260">
            <template slot-scope="scope">
              <el-form-item
                class="eve-common-fixed-error"
                :prop="'list.' + scope.$index + '.dateText'"
                :rules="tableRules.dateText"
              >
                <el-date-picker
                  class="eve-common-date-picker"
                  :size="$size"
                  v-model="scope.row.dateText"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
                <!-- 自定义表单错误提示 -->
                <template slot="error" slot-scope="scope">
                  <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </template>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="left" class-name="must">
            <template slot-scope="scope">
              <el-form-item
                class="eve-common-fixed-error"
                :prop="'list.' + scope.$index + '.name'"
                :rules="tableRules.name"
              >
                <el-input class="eve-common-input" :size="$size" v-model="scope.row.name" />
                <!-- 自定义表单错误提示 -->
                <template slot="error" slot-scope="scope">
                  <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </template>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="地址" align="left">
            <template slot-scope="scope">
              <el-form-item>
                <el-input class="eve-common-input" :size="$size" v-model="scope.row.address" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="delRow(scope.row,scope.$index)" :size="$size">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin:12px auto;text-align:center;">
          <el-button type="primary" :size="$size" @click="addRow()">新增一行</el-button>
        </div>
      </el-form>
    </div>
  </eve-container>
</template>
<script>

import { cascaderOption, dropDownTree } from './cascader'
import AreaCodeSelector from '@/components/area-code-selector'
export default {
  name: 'form',
  components: {
    AreaCodeSelector
  },
  data () {
    // 日期范围正则表单-可根据实际需求对该方法进行调整
    const checkDateRange = (rule, value, callback) => {
      console.log(value)
      const { dateStart, dateEnd } = value
      if (dateStart && dateEnd && dateStart < dateEnd) {
        return callback()
      } else {
        return callback(new Error('请选择正确的日期范围！'))
      }
    }
    const checkAreaCode = (rule, value, callback) => {
      console.log(value)
      if (!value || value.length < 3) {
        callback(new Error('111111111'))
      } else {
        if (value.some(el => !el)) {
          callback(new Error('2222222222'))
        } else {
          callback()
        }
      }
    }
    return {
      cascaderOption, // 级联option数据
      dropDownTree,
      // 测试表单字段
      form: {
        text: '',
        requestText: '',
        longText: '',
        fieldText: '',
        passwordText: '',
        clearText: '',
        numberText: '',
        unitText: '',
        horizontalRadio: '1',
        horizontalCheckBox: ['复选框 A', '复选框 B'],
        verticalRadio: '1',
        verticalCheckBox: ['复选框 A', '复选框 B'],
        selectText: '选项1',
        selectMultipleText: ['选项1', '选项2'],
        selectFilterText: '选项1',
        selectFilterMultipleText: ['选项1', '选项2'],
        cascaderText: '',
        cascaderMultipleText: [],
        switchText: true,
        sliderText: 50,
        dateText: '',
        timeText: '',
        monthText: '',
        fileText: '',
        address: [], // ['360000', '360600', '360603'],
        dateRange: {
          dateStart: '',
          dateEnd: ''
        },
        dateRangScope: '',
        detailField: '这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段这是一个多行的详情字段'
      },
      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
      rules: {
        requestText: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        verticalCheckBox: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        selectText: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        selectMultipleText: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        dateText: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        fileText: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        passwordText: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        dateRange: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: checkDateRange, trigger: 'change' }
        ],
        address: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: checkAreaCode, trigger: 'change' }
        ]
      },

      // 表单验证
      formValidate: {
        mobilePhone: '', // 移动电话
        fixedPhone: '', // 固定电话
        fax: '', // 传真
        email: '', // 邮箱
        postalCode: '', // 邮政编码
        idCard: '', // 身份证
        socialCreditCode: '', // 统一社会信用代码
        allDigital: '', // 全数字
        allChinese: '', // 全中文
        allLetters: '', // 全字母
        numberAndLetter: '', // 数字+字母
        carNumber: '' // 车牌号（含新能源）

      },
      formValidateRules: {
        mobilePhone: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkMobilePhone, trigger: 'blur' }
        ],
        fixedPhone: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkFixedPhone, trigger: 'blur' }
        ],
        fax: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkFax, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkEmail, trigger: 'blur' }
        ],
        postalCode: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkPostalCode, trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkIdCheck, trigger: 'blur' }
        ],
        socialCreditCode: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkSocialCreditCode, trigger: 'blur' }
        ],
        allDigital: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkAllDigital, trigger: 'blur' }
        ],
        allChinese: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkAllChinese, trigger: 'blur' }
        ],
        allLetters: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkAllLetters, trigger: 'blur' }
        ],
        numberAndLetter: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkNumberAndLetter, trigger: 'blur' }
        ],
        carNumber: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkCarNumber, trigger: 'blur' }
        ]
      },

      tableForm: {
        list: [
          // {
          //   isReadOnly: false,
          //   dateText: '',
          //   name: '',
          //   address: ''
          // }
        ]
      },
      listTmpl: [],
      tableRules: {
        dateText: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        name: [
          { required: true, message: '必填项', trigger: 'blur' }
        ]
      }

    }
  },
  mounted () { },
  methods: {
    // 普通上传[start]-仅实现静态演示上传效果
    uploadTextBtn () {
      this.$refs.inputUploadFile.click()
    },
    uploadChange () {
      this.form.fileText = this.$refs.inputUploadFile.files[0].name
    },
    clearUploadTextBtn () {
      this.form.fileText = ''
    },
    // 普通上传[end]-仅实现静态演示上传效果

    // 复杂图片上传[end]-仅实现静态演示上传效果
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 复杂图片上传[end]-仅实现静态演示上传效果

    // 动态增减表格表单
    addRow () {
      // this.$refs.tableForm.validate((valid) => {
      //   if (valid) {
      //     this.tableForm.list.push({
      //       isReadOnly: false,
      //       dateText: '',
      //       name: '',
      //       address: ''
      //     })
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
      this.tableForm.list.push({
        isReadOnly: false,
        dateText: '',
        name: '',
        address: ''
      })
    },
    delRow (row, index) {
      this.tableForm.list.splice(index, 1)
    },
    // 消息提示
    info () {
      this.$message('这是一条消息提示')
    }

  }
}
</script>
